<template>
  <!-- <teleport to="body" > -->
  <div class="moduleDrawer" v-if="modelValue" @scroll="handlescroll">


  <transition name="listDrawerBox" mode="out-in">
    <div class="drawerBox animate__animated" >
      <div class="headerDrawer" ref="headerDrawerRef">
          <!-- 头部 start -->
      <div class="aic jcb p20">
        <div class="drawerBox-title">
          {{ title }}
        </div>
        <div class="aic jcfend">
          <slot name="operationBotton"> </slot>
          <el-icon size="25px" @click.stop="handleClose" class="cP ml15"
            ><close-bold
          /></el-icon>
        </div>
      </div>
      <slot name="detailSynopsis"> <div class="aic px20"></div> </slot>

      <el-tabs v-model="editableTabsValue" class="">
        <el-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
      </div>
      <el-scrollbar class="operationContent" :style="{
        height:`calc(100% - ${contentHeight}px)` 
      }">
        <slot name="operationContent" :data="{ is:editableTabsValue }"> </slot>
      </el-scrollbar>
      <!-- 头部 start -->
    </div>
  </transition>

  <!-- </teleport> -->
    </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  watch,
  onBeforeMount,
  nextTick,
} from "vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const emit = defineEmits(["update:modelValue"]);
const state = reactive({});
const editableTabsValue = ref(0);
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  tabs: {
    type: Object,
    default: [],
  },
});
const editableTabs: any = ref([]);
const headerDrawerRef = ref();
const contentHeight = ref(200)
const times = ref<any>(null)
const handlescroll = (e:any)=>{
  // 阻止事件冒泡
  e.stopPropagation();
}
const watchHeight = () =>{

  if(headerDrawerRef.value){
    contentHeight.value = headerDrawerRef.value.offsetHeight+30
   
  }
}
window.addEventListener("resize", function () {
     watchHeight()
})

onBeforeMount(() => {});
onMounted(() => {

    if (props.tabs.length > 0) {
    editableTabsValue.value = props.tabs[0].name;
  }
});
watch(
  () => props.modelValue,
  (val) => {
   if(val){
    setTimeout(()=>{
     
        watchHeight()
    },100)
   }
  }
);
const handleClose = () => {
   emit("update:modelValue", false);
   return
  ElMessageBox.confirm("确定关闭弹框?", "警示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      emit("update:modelValue", false);
    })
    .catch(() => {});
};
</script>

<style lang="scss">
.moduleDrawer{
  background-color: rgba($color: #000, $alpha: 0.3);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 4;
  left: 0;
  top: 0;
}
.px20 {
  padding: 0 20px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
  font-size: 18px;
  color: #303133;
}

.drawerBox {
  position: fixed;
  width: 89%;
  height: 100px;
  min-height: calc(100% - 0px);
  z-index: 11120;
  bottom: 0;
  right: 0;
  padding: 0 15px;
  box-shadow: -6px 0 6px rgba(0, 0, 0, 0.04);
  color: var(--el-text-color-secondary);
  background-color: var(--commonBoxmp);
  .drawerBox-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--labelTextColor-detail);
  }
}
.listDrawerBox {
}
.listDrawerBox-enter-active,
.listDrawerBox-leave-active {
  transition: all 0.5s ease;
}
.listDrawerBox-enter-from,
.listDrawerBox-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.operationContent {
  height: calc(100% - 100px);
}
</style>
